<template>
  <view class="drawCards u-skeleton" v-if="info">
    <u-navbar title="闪卡抽卡" :background="{ 'background': 'linear-gradient(180deg, #292929, #13131A)' }" title-color="#fff"
      back-icon-color="#fff" :borderBottom="false" class="u-skeleton-rect">
      <template v-slot:right>
        <view class="nav-right" @click="$util.redirectTo('/pages/my/cardRecord')">抽卡记录</view>
      </template>
    </u-navbar>
    <diy-animation :image="config.images"></diy-animation>
    <view class="new-draw-info">
      <view class="new-draw-left">
        <text>1~100号极客 闪卡 等你来抽!</text>
      </view>
      <view class="new-draw-right" @click="$util.redirectTo('/pages/my/playing')">
        <image :src="$util.img('/static/img/drawCards/play-text.png')" mode=""></image>
        <text>玩法介绍</text>
      </view>
    </view>
    <view class="box-move">
      <diy-move :list='list' :diyStyle="{
    'width': '100%'
  }"></diy-move>
    </view>
    <view class="bottom-content" :style="{
    'background-image': 'url(' + $util.img('/static/img/drawCards/bottom-bg.png') + ')'
  }">
      <image class="boximg" :src="$util.img('/static/img/drawCards/box.png')" mode="heightFix"></image>
      <view class="title">
        <view class="txt">随机得潮卡1张</view>
        <view class="tips">(不含勋章和实物卡）</view>
      </view>
      <view class="box-into" @click="$util.redirectTo('/pages/my/caryPay')">
        <view class="b-left">共{{ info.sell_config.total }}张/{{ info.sell_config.can }}款可抽</view>
        <view class="b-right">
          <view class="b-txt">查看详情</view>
          <u-icon name='arrow-right' size='28'></u-icon>
        </view>
      </view>
      <view class="box-die-btn">
        <view class="bb-btn-left" @click="open('oneShow')">出售潮卡</view>
        <view class="bb-btn-right" @click="paycard">
          <text v-if="!info.config.charge">暂无卡牌可抽</text>
          <text v-else>{{ info.config.charge }}抽一张</text>
        </view>
      </view>
      <view class="price">
        <image :src="$util.img('/static/img/card/金币.png')" mode="heightFix"></image>
        <view class="txt-price">拥有{{ info.userGive }}个</view>
      </view>
    </view>
    <!-- 弹窗 -->
    <diy-draw-one :show='oneShow' @close='oneClose' @openMarker='openMarker'></diy-draw-one>
    <!-- 市场价 -->
    <diy-market-price :show="marketShow" @close="marketShow = false"></diy-market-price>

    <u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>
<script>
import diyDrawOne from "@/components/diy-draw-one/diy-draw-one.vue";
import diyMarketPrice from "../../components/diy-marketPrice/diy-marketPrice.vue"
export default {
  components: {
    diyDrawOne, diyMarketPrice
  },
  data() {
    return {
      // 首次进入加载
      loding: false,
      // 第一个弹出层
      oneShow: false,

      list: [],
      //整个出售页面的数据
      info: null,
      //市场价格弹窗控制
      marketShow: false,
      config: {}
    }
  },
  onShow() {
    this.getinfo();
  },
  methods: {
    //查看市场价格
    openMarker() {
      this.marketShow = true;
    },
    //页面数据
    getinfo() {
      this.$http.asyncSendrequest({
        url: '/order/sellDetail',
        success: res => {
          this.info = res.data;
          this.loding = false;
        }
      })
      this.$http.asyncSendrequest({
        url: '/goods/drawLog',
        data: {
          page: 1,
          page_size: 10
        },
        success: res => {
          this.list = res.data;
        }
      })
      this.$http.asyncSendrequest({
        url: '/goods/flashcardConfig',
        success: res => {
          this.config = res.data.config;
        }
      })

    },
    // 关闭第一个弹出层
    oneClose() {
      this.oneShow = false;
      this.$forceUpdate()
    },
    // 关闭第二个弹出层
    twoClose() {
      this.twoShow = false;
    },
    //开启弹窗
    open(type) {
      this[type] = true;
      this.$forceUpdate()
    },
    paycard() {
      this.$http.asyncSendrequest({
        url: '/order/drawCard',
        data: {
          charge: this.info.config.charge
        },
        success: res => {
          this.$util.taost({
            title: res.msg,
            callback: v => { }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-right {
  margin-right: 30rpx;
  color: #fff;
}

.drawCards {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #292929, #13131A);
  position: relative;

  .new-draw-info {
    margin: 0 30rpx;
    position: absolute;
    top: 130rpx;
    display: flex;
    justify-content: space-between;

    .new-draw-left {
      width: 60%;

      text {
        font-size: 50rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    .new-draw-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100rpx;

      image {
        width: 100rpx;
        height: 100rpx;
      }

      text {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #DFC0FF;
      }
    }
  }

  .uni-margin-wrap {
    width: 100%;
    position: absolute;
    top: 310rpx;

    .swiper {
      height: 120rpx;

      .swiper-item {
        width: 80%;

        .swiper-item-bg {
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: #fff;
          border-radius: 35rpx;

          .head {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
          }

          text {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #000000;
          }

          .goodImg {
            width: 60rpx;
            height: 60rpx;
          }
        }

      }
    }
  }
}

.bottom-content {
  width: 100%;
  min-height: 530rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .boximg {
    height: 640rpx;
    margin-top: -242px;
    margin-left: 30px;
  }

  .title {
    display: flex;
    align-items: center;
    margin: 0 30rpx 36rpx;

    .txt {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #FFFFFF;
      margin-right: 10rpx;
    }

    .tips {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      opacity: 0.5;
    }
  }

  .box-into {
    height: 90rpx;
    border: 1rpx solid #FFFFFF;
    border-radius: 10rpx;
    margin: 0 30rpx 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx 0 40rpx;

    .b-left {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }

    .b-right {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      align-items: center;

      .b-txt {
        margin-right: 14rpx;
      }
    }
  }

  .box-die-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx 20rpx;

    view {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .bb-btn-left {
      width: 244rpx;
      height: 96rpx;
      background: #DDEEFF;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bb-btn-right {
      width: 426rpx;
      height: 96rpx;
      background: #FADEB8;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .price {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    .txt-price {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}


.box-move {
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  height: 40vh;
  z-index: 999;
}
</style>